<script setup lang="ts">
import { reactive, ref, onMounted } from "vue"; //引入vue函数
import type { Goods } from "@/model"; //引入自定义数据类型
import { getGoodsList, delGoods } from "@/api"; //商品接口
import GoodsEdit from "./components/GoodsEdit.vue"; //添加修改商品对话框
import { ElMessage, ElMessageBox } from "element-plus"; //导入消息框

//表格数据对象
const tableData = ref<Goods[]>([]);
//表格原始数据
const oldData = ref<Goods[]>([]);

//分页变量
const currentPage = ref(1); //当前页
const pageSize = ref(5); //每页显示记录数
const totalRow = ref(0); //总记录数

//是否显示 添加修改商品对话框
const isShowDialog = ref(false);

//添加修改商品对话框的标题
const dialogTitle = ref("新增商品");

//当前将要修改的商品
const goods = reactive({
  id: 0,
  name: "",
  category_id: "",
  description: "",
  picture: "",
  price: "",
  spec: "",
  stock: "",
});

//定义表单数据对象
const searchForm = reactive({
  name: "",
});

//搜索关键字
const keyword = ref("");

//查询所有商品
async function loadGoodsList(page: number) {
  const params = {
    page,
    pagesize: pageSize.value,
    search: keyword.value,
  };
  const res = await getGoodsList(params);
  totalRow.value = res.data.data.total;
  oldData.value = res.data.data.list;
  tableData.value = res.data.data.list;
}

//表单搜索
function searchGoods() {
  keyword.value = searchForm.name;
  currentPage.value = 1;
  loadGoodsList(currentPage.value);
}

//表单重置
function resetForm() {
  keyword.value = "";
  searchForm.name = "";
  currentPage.value = 1;
  //显示第1页的数据列表
  loadGoodsList(1);
}

//点击分页按扭
function changePage(page: number) {
  currentPage.value = page;
  loadGoodsList(page);
}

//添加商品
function addGoods() {
  dialogTitle.value = "新增商品";
  goods.id = 0;
  goods.name = "";
  goods.category_id = "";
  goods.description = "";
  goods.picture = "";
  goods.price = "";
  goods.spec = "";
  goods.stock = "";
  isShowDialog.value = true;
}

//修改商品
function updateGoods(data: Goods) {
  dialogTitle.value = "修改商品";
  Object.assign(goods, data);
  isShowDialog.value = true;
}

//删除商品
function deleteGoods(data: Goods) {
  //确认对话框
  ElMessageBox.confirm("确定要删除此商品吗？", {
    closeOnClickModal: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(async () => {
      const res = await delGoods({ id: data.id });
      if (res.data.errno == 0) {
        //重置搜索表单
        resetForm();
        //删除成功
        ElMessage.success(res.data.errmsg);
      } else {
        //删除失败
        ElMessage.error(res.data.errmsg);
      }
    })
    .catch(() => {
      //console.log("点击了取消按扭")
    });
}

//关闭对话框
function closeDialog() {
  isShowDialog.value = false;
  currentPage.value = 1;
  loadGoodsList(currentPage.value);
}

//组件加载完成
onMounted(() => {
  currentPage.value = 1;
  loadGoodsList(currentPage.value);
});
</script>

<template>
  <!--搜索表单-->
  <section class="search">
    <el-form :inline="true">
      <el-form-item label="商品名称">
        <el-input v-model="searchForm.name" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchGoods">搜索</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </section>

  <!--表格显示内容-->
  <section class="goods_page">
    <div><el-button type="primary" @click="addGoods">新增商品</el-button></div>
    <div>
      <!--表格-->
      <el-table :data="tableData" row-key="id" style="width: 100%" border>
        <!--空数据时显示内容-->
        <template #empty>暂无数据</template>
        <!--表格有数据时的显示内容-->
        <el-table-column
          prop="id"
          label="商品编号"
          width="100"
        ></el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column
          prop="price"
          label="商品价格"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="stock"
          label="商品库存"
          width="100"
        ></el-table-column>
        <el-table-column prop="description" label="商品简介">
          <template #default="scope">
            <!--replace函数，用于过滤HTML代码-->
            <el-text line-clamp="2">{{
              scope.row.description.replace(/<\/?[^>]+(>|$)/g, "")
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="商品图片" width="100">
          <template #default="scope">
            <img :src="scope.row.picture" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="warning" @click="updateGoods(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="deleteGoods(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页栏-->
    <div>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="totalRow"
        v-model:current-page="currentPage"
        @change="changePage"
      />
    </div>
  </section>

  <!--新增商品、修改商品，对话框-->
  <el-dialog v-model="isShowDialog" :title="dialogTitle" width="700">
    <GoodsEdit
      :is-show="isShowDialog"
      :goods="goods"
      @closeDialog="closeDialog"
    ></GoodsEdit>
  </el-dialog>
</template>

<style scoped>
.goods_page,
.search {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 5px #e4e7ed;
  margin: 20px;
  border: 1px solid transparent;
}
.search {
  height: 50px;
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.search .el-form-item {
  margin-top: 0px;
  margin-bottom: 0px;
}
.goods_page > div {
  margin: 20px;
}
.goods_page img {
  width: 50px;
  height: 50px;
}
</style>
